Intlayer

import { Container } from '@intlayer/design-system'; import { getFrequentQuestionMetadataRecord } from '@intlayer/docs'; import { ArrowRight } from 'lucide-react'; import type { LocalPromiseParams } from 'next-intlayer'; import { IntlayerServerProvider, useIntlayer } from 'next-intlayer/server'; import { Suspense } from 'react'; import { Link } from '@/components/Link/Link'; export { generateMetadata } from './metadata'; const FrequentQuestionsPageTitle = () => { const { h1 } = useIntlayer('frequent-questions-page'); return <h1 className="font-bold text-2xl">{h1}</h1>; }; const FrequentQuestionsPage = async ({ params }: LocalPromiseParams) => { const { locale } = await params; const frequentQuestions = await getFrequentQuestionMetadataRecord(locale); const frequentQuestionsList = Object.values(frequentQuestions); return ( <IntlayerServerProvider locale={locale}> <div className="m-auto flex max-w-2xl flex-col gap-10 p-10 text-center"> <Suspense> <FrequentQuestionsPageTitle /> </Suspense> <div className="flex flex-col gap-4 text-left"> {frequentQuestionsList.map((frequentQuestion) => ( <Link key={frequentQuestion.docKey} href={frequentQuestion.url} label={frequentQuestion.title} variant="hoverable" color="neutral" > <Container className="flex flex-row items-center justify-between p-3"> <div className="flex flex-col gap-2"> <strong>{frequentQuestion.title}</strong> <p className="text-neutral text-sm"> {frequentQuestion.description} </p> </div> <ArrowRight /> </Container> </Link> ))} </div> </div> </IntlayerServerProvider> ); }; export default FrequentQuestionsPage;